<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title" @closed="operateClose"
      :visible.sync="open" size="65%" append-to-body>
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="120px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺名称" prop="shortName">
              <name-input v-model="form.shortName" :maxlength="20" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺地址" prop="shopProvince">
              <el-cascader @change="shopAddressInfo" v-model="shopProvince" clearable :options="cityList"
                :props="{ label: 'name', value: 'code' }" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="店铺详细地址" label-width="130px" prop="shopAddress">
              <el-input v-model="form.shopAddress" :maxlength="23" placeholder="请输入店铺详细地址	" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer-operation">
        <el-button @click="open = false">返回</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-hasPermi="['ecs:yeePayWithholding:edit']"
          v-clickOnce>提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import {
  shopCreate,
  getYeePayWithholding
} from '@/api/ecs/yeePayWithholding'
import { listYeePayCity } from '@/api/ecs/yeePayCity'

export default {
  name: "yeePayWithholdingShop",
  components: { YeePayFileUpload },
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "店铺信息"
    },
    type: {
      type: Number,
      default: 2
    },
    id: {
      type: Number,
    },
  },
  data() {
    return {
      form: {
        id: null,
        platformId: null,
        agentId: null,
        childAgentId: null,
        agencyOperationsId: null,
        shopId: null,
        type: null,
        requestId: null,
        shopProvince: null,
        shopCity: null,
        shopDistrict: null,
        shopAddress: null,
      },
      open: false,
      industry: [],
      shopList: [],
      province: [],
      cityList: [],
      bankList: [],
      agentList: [],
      shopProvince: [],
      loading: false,
      industryList: [],
      isRefresh: false,
      agentLoading: false,
      bankNameLoading: false,
      rules: {
        shopAddress: [
          { required: true, message: "店铺详细位置不能为空", trigger: "blur" }
        ],
        shopProvince: [
          { required: true, message: "请选择店铺地址省市区", trigger: "change" }
        ],
      }
    }
  },
  created() {
    listYeePayCity().then(response => {
      this.cityList = this.handleTree(response.data, "code", "parentCode");
    })
  },
  methods: {
    shopAddressInfo(val) {
      this.form.shopProvince = val[0]
      this.form.shopCity = val[1]
      this.form.shopDistrict = val[2]
    },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          shopCreate(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.open = false;
            this.loading = false
            this.isRefresh = true
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    operateClose() {
      this.open = false
      this.$emit("handleShopUpdate", false, this.isRefresh, {})
    },

  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.loading = true
          getYeePayWithholding(val).then(response => {
            if (response.data) {
              let data = response.data;
              this.shopProvince = [data.shopProvince, data.shopCity, data.shopDistrict]
              this.loading = false
              this.form = data
            }
          }).catch(() => {
            this.loading = false
          });
        }
      },
      immediate: true,
    }
  }

}

</script>
<style scoped lang="scss">
.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
